<template>
	<view class="wrapper" v-show="isShowMask">
		<transition name="content">
			<view class="content_view" v-show="isShow">
				<view class="title_view">
					<view class="title">请选择所在地区</view>
					<view class="close_view" @click="hidden">
						<icon class="close_icon" :type="'clear'" size="26" />
					</view>
				</view>
				<view class="select_top">
					<view class="select_top_item" ref="select_top_item" v-for="(item,index) in dataList" :key="index"
						@click="select_top_item_click(index)">
						<text class="address_value">{{typeof item === 'string' ?item : item.name}}</text>
					</view>
					<view class="indicator" :style="{ left: indicatorStyleLeft + 'px' }" ref="indicator"></view>
				</view>
				<swiper class="swiper" :current="currentIndex" @change="swiperChange">
					<swiper-item v-for="(swiper_item,swiper_index) in dataList" :key="swiper_index">
						<view class="swiper-item">
							<scroll-view class="scroll-view-item" scroll-y="true">
								<view class="address_item" v-for="(item,index) in cityAreaArray[swiper_index]"
									:key="index" @click="address_item_click(swiper_index,index)">
									<image v-if="selectIndexArr[swiper_index] === index" class="address_item_icon"
										src="../../static/yixuan-selectAddress/gou.png" mode=""></image>
									{{item.name}}
								</view>
							</scroll-view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</transition>
		<view class="mask" @click="hidden" v-show="isShowMask"></view>
	</view>
</template>

<script>
	import {
		getProvince,
		getCity,
		getCounty,
		getTown
	} from "@/config/api.js"
	export default {
		name: "select-address",
		props: {
			value: {
				type: [Array || String],
				default: ''
			}
		},
		updated() {
			if (this.value === '') return
			if (this.value.join('') === this.myValue.join('')) return
			this.myValue = this.value
			this.init()
		},
		data() {
			return {
				isShow: false,
				isShowMask: false,
				dataList: ['请选择'],
				currentIndex: 0,
				cityAreaArray: [],
				selectIndexArr: [],
				indicatorStyleLeft: 16,
				myValue: []
			};
		},
		methods: {
			async init() {
				const [province_id = '', city_id = '', county_id = '', town_id = ''] = this.myValue
				if (typeof this.value == 'string' && this.value.length === 0) return
				//有数据
				const {
					data: provinceList
				} = await getProvince()
				this.cityAreaArray[0] = provinceList
				provinceList.forEach((province, index) => {
					if (province.province_id === province_id) {
						return this.address_item_click(0, index)
					}
				})
				const {
					data: cityList
				} = await getCity(province_id)
				this.cityAreaArray[1] = cityList
				cityList.forEach((city, index) => {
					if (city.city_id === city_id) {
						this.address_item_click(1, index)
						return this.selectIndexArr.splice(1, 5, index)
					}
				})
				const {
					data: countyList
				} = await getCounty(city_id)
				this.cityAreaArray[2] = countyList
				countyList.forEach((county, index) => {
					if (county.county_id === county_id) {
						this.address_item_click(2, index)
						return this.rederCounty(2, index)
					}
				})
				const {
					data: townList
				} = await getTown(county_id)
				this.cityAreaArray[3] = townList
				townList.forEach((town, index) => {
					if (town.town_id === town_id) {
						this.address_item_click(3, index, false)
						return this.renderTown(3, index)
					}
				})
			},
			show() {
				this.isShow = true
				this.isShowMask = true
			},
			hidden() {
				this.isShow = false
				setTimeout(() => {
					this.isShowMask = false
				}, 500);
			},
			select_top_item_click(index) {
				this.currentIndex = index
				this.$nextTick(() => {
					this.changeIndicator(index)
				})

			},
			swiperChange(event) {
				let index = event.detail.current
				this.currentIndex = index

				this.changeIndicator(index)
			},
			changeIndicator(index) {

				/*
				let itemWidth = this.$refs.select_top_item[index].$children[0].$el.offsetWidth
				if (itemWidth > 80){
					itemWidth = 80
				}
				let itemCenterX = 10 + index * 80 + itemWidth / 2
				let indicatorWidth = this.$refs.indicator.$el.offsetWidth
				this.$refs.indicator.$el.style.left = itemCenterX - indicatorWidth / 2 + 'px'
				*/
				let indicatorWidth = 30
				const query = uni.createSelectorQuery().in(this);
				let arr = query.selectAll('.select_top_item .address_value')
				arr.fields({
					size: true,
					scrollOffset: false
				}, data => {

					let itemWidth = data[index]["width"] > 80 ? 70 : data[index]["width"]
					let itemCenterX = 10 + index * 80 + itemWidth / 2
					let left = itemCenterX - indicatorWidth / 2
					this.indicatorStyleLeft = left

				}).exec();


			},
			async address_item_click(swiper_index, index, isClose = true) {
				this.selectIndexArr.splice(swiper_index, 5, index)
				const renderAddress = [
					this.renderProvince,
					this.renderCity,
					this.rederCounty,
					this.renderTown
				]
				renderAddress[swiper_index](swiper_index, index, isClose)

			},
			async renderProvince(swiper_index, index) {

				const currentObj = this.cityAreaArray[0][index]
				const {
					data: citys
				} = await getCity(currentObj.province_id)
				const city = currentObj.name
				this.dataList.splice(swiper_index, 5, currentObj)
				this.dataList.splice(swiper_index + 1, 0, '请选择')
				this.cityAreaArray.splice(swiper_index + 1, 1, citys)
				setTimeout(() => {
					this.currentIndex = 1
					this.changeIndicator(1)
				}, 50);
			},
			async renderCity(swiper_index, index) {
				const {
					data: countys
				} = await getCounty(this.cityAreaArray[swiper_index][index].city_id)
				const currentObj = this.cityAreaArray[swiper_index][index]
				const area = currentObj.name
				if (area !== undefined) {
					this.dataList.splice(swiper_index, 5, currentObj)
					this.dataList.splice(swiper_index + 1, 0, '请选择')
					this.cityAreaArray.splice(swiper_index + 1, 1, countys)

					setTimeout(() => {
						this.currentIndex = swiper_index + 1
						this.changeIndicator(swiper_index + 1)
					}, 50);
				}
			},
			async rederCounty(swiper_index, index) {
				const {
					data: towns
				} = await getTown(this.cityAreaArray[swiper_index][index].county_id)
				const currentAreaArray = this.cityAreaArray[swiper_index]
				const currentObj = currentAreaArray[index]
				const area = currentObj.name
				if (area !== undefined) {
					const currentAreaArray = this.cityAreaArray[swiper_index]
					const city = currentObj.name

					this.dataList.splice(swiper_index, 5, currentObj)
					this.dataList.splice(swiper_index + 1, 0, '请选择')
					this.cityAreaArray.splice(swiper_index + 1, 1, towns)

					setTimeout(() => {
						this.currentIndex = swiper_index + 1
						this.changeIndicator(swiper_index + 1)
					}, 50);
				}
			},
			async renderTown(swiper_index, index, isClose) {

				const currentAreaArray = this.cityAreaArray[swiper_index]
				const currentObj = currentAreaArray[index]
				this.dataList.splice(swiper_index, 1, currentObj)

				//选择成功返回数据

				this.$nextTick(() => {
					this.changeIndicator(swiper_index)
				})
				if (!isClose) return
				this.submit(this.dataList)
				setTimeout(() => {
					this.isShow = false
				}, 100);
				setTimeout(() => {
					this.isShowMask = false
				}, 500);
			},
			submit(data) {
				this.$emit("selectAddress", data)
			}
		},
		created() {
			getProvince().then(res => {
				this.cityAreaArray.push(res.data)
			})
		},
		mounted() {

			// this.changeIndicator(0)
		}
	}
</script>

<style lang="scss">
	// 不换行
	@mixin no-wrap() {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.wrapper {
		z-index: 1999;
		position: absolute;
		top: -44px;
		left: 0;
		bottom: 0;
		right: 0;

		.content_view {
			z-index: 999;
			background: white;
			position: absolute;
			height: 80%;
			left: 0;
			bottom: 0;
			right: 0;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;

			.title_view {
				height: 12%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 $uni-spacing-row-sm;

				.title {
					font-size: uni-font-size-sm;
				}

				.close_view {
					height: 60px;
					width: 60px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.select_top {
				height: 8%;
				display: flex;
				justify-content: start;
				align-items: center;
				padding: 10px;
				position: relative;
				box-sizing: border-box;

				.select_top_item {
					width: 80px;
					font-size: 14px;
					@include no-wrap();
				}

				.indicator {
					position: absolute;
					width: 30px;
					height: 2px;
					background: $uni-color-error;
					left: 16px;
					bottom: 0;
					transition: left 0.5s ease;
				}
			}

			.swiper {
				height: 80%;
				position: relative;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;

				.swiper-item {
					height: 100%;

					.scroll-view-item {
						height: 100%;
						padding: 0 10px;

						.address_item {
							padding: 5px 0;
							font-size: 14px;
							display: flex;
							align-items: center;

							.address_item_icon {
								width: 20px;
								height: 20px;
								margin-right: 10px;
							}
						}
					}
				}
			}
		}

		.mask {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background: $uni-text-color-grey;
			opacity: 0.7;
		}
	}

	.content-enter {
		transform: translateY(100%);
	}

	.content-enter-to {
		transform: translateY(0%);
	}

	.content-enter-active {
		transition: transform 0.5s;
	}

	.content-leave {
		transform: translateY(0%);
	}

	.content-leave-to {
		transform: translateY(100%);
	}

	.content-leave-active {
		transition: transform 0.5s;
	}
</style>
